<template>
    <div class="subpage" v-if="good">
        <My-head :title="$route.query.name">
            <van-icon name="revoke" color="#f50" class="hicon"/>
        </My-head>

        <div class="gbox">
            <van-image :src="good.img" class="gimg"></van-image>
            <h2 class="name">{{ good.name }}</h2>
                <div class="col">
                    <p class="price">¥ {{ good.price }} </p>
                    <p class="type"> {{ good.type.text }} </p>
                </div>
        </div>

        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="评论" dot />
            <van-goods-action-icon icon="like-o" @click="likeAction" text="点赞" color="red" :badge="likeCount" />
            <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
            <van-goods-action-icon icon="shop-o" text="收藏" badge="12" />
            <van-goods-action-button type="warning" text="加入购物车" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
export default {
    data() {
        return {
            good: null,
            gid: this.$route.params.gid,
            // gid: '',
            likeCount: 0
        }
    },
    methods: {
        async getGoods() {
            let res = await this.$ajax.getGoodList ({
                id: this.gid
                // id: this.$route.params.gid
            })
            this.good = res[0]
        },
        getLikeCount() {
            // 获取所有点赞的次数
            this.$ajax.getLikeOne({
                gid: this.gid
            })
            .then(res => {
                this.likeCount = res.length
            })
        },
        checkIsLogin(callback) {  // 点赞，先检查用户是否登录
            if(this.userInfo){
                callback()
            } else {
                this.$dialog.confirm({
                    title: '温馨提示',
                    message: '你还没有登录,请先登录吧!',
                }).then(() => {
                    // on close
                    this.$router.push({ name: 'login' })
                })
                   .catch( err => {
                })
            }
        },
        likeAction() {
            // 先查询 
            // 已经点赞就取消点赞
            // 如果没有就直接点赞
            //  {gid,username,id,phone,good}  
            this.checkIsLogin(() => {
                this.$ajax.getLikeOne({
                    gid: this.gid,
                    phone: this.userInfo.phone
                })
                .then(res => {
                    if(res.length > 0) {
                        // 删除 
                        // id 不是gid 带这条记录的id 
                        this.$ajax.removeLikeOne(res[0].id)
                        .then(data => {
                            this.getLikeCount()
                            //  this.$toast('你取消了点赞') // 有问题
                            this.showSuccessMsg('你取消了点赞')
                        })
                    } else {
                        // 添加
                        this.$ajax.addLikeOne({
                            gid: this.gid,
                            phone: this.userInfo.phone,
                            username: this.userInfo.username,
                            good: this.good,
                        })
                        .then(result => {
                            this.getLikeCount()
                            this.showSuccessMsg('点赞成功')
                            // this.$toast('点赞成功')
                        })
                    }
                })
            })
        },
    },
    mounted() {
        this.getGoods()
        this.getLikeCount()
    }
}
</script>

<style lang="scss" scoped>
.gbox {
    width: 100%;
    padding: 0 15px;
    .gimg {
        width: 100%;
    }
    .name{
        color: #191a1b;
        font-size: 16px;
        display: block;
        max-width: 100%;
        padding:0 5px;
        margin-top:8px;
    }
    .col{
        margin-top:8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        padding:0 5px 15px 5px;
        .price{
            color:#f50;
        }
        .type{
            color: deeppink;
        }
    }
}
</style>